<template>
  <bfs-order-list-std ref="orderListRef">
    <template v-slot:btn="prop">
      <q-btn @click="onUpdateContractno" color="primary" label="更新合同号" v-if="prop.data.orderType === 1"/>
    </template>
    <template v-slot:btnSlot="props">
      <q-item clickable v-close-popup @click="doBuildWmsOrder()" :disable="props.data.selectedItem.length===0">
        <q-item-section avatar>
          <q-icon name="fiber_manual_record"></q-icon>
        </q-item-section>
        <q-item-section>
          <q-item-label>生成仓储出货通知单</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </bfs-order-list-std>

  <!-- 生成仓储出货通知单弹窗  -->
  <q-dialog transition-hide="none" transition-show="none" v-model="showBuildWmsOrderDialog">
    <q-card style="max-width: 350px; width: 100%">
      <q-card-section class="q-pa-sm">
        <div class="text-h6">发送至WMS</div>
      </q-card-section>
      <q-separator />
      <!--错误提示-->
      <q-banner class="text-white bg-red" dense inline-actions v-if="errorMessageForBuildWmsOrder">
        {{ errorMessageForBuildWmsOrder }}
        <template v-slot:action>
          <q-btn @click="errorMessageForBuildWmsOrder = null" dense flat icon="close" size="sm" />
        </template>
      </q-banner>
      <q-card-section class="q-pa-sm">
        <div class="row q-col-gutter-sm q-pb-sm">
          <div class="col-12">
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>出库单序号</span>
            <q-input dense no-error-icon outlined square stack-label v-model="$d.orderIdArrayStr" readonly/>
          </div>
          <div class="col-12" v-if="false">  //暂留，防后期启用
            <q-icon color="red" name="fas fa-asterisk" size="10px" />
            <span>批次属性2填证书号</span>
            <simple-filter-select
              option-label="name"
              option-value="value"
              :autoSelectFirstOption="true"
              :options="$d.CertNoToLotAttr2DropdownList"
              :use-filter="false"
              :options-dense="false"
              v-model="$d.CertNoToLotAttr2" />
          </div>
        </div>
      </q-card-section>
      <q-separator class="separator" />
      <q-card-actions align="right">
        <q-btn @click="buildWmsOrderByBfsSelectedItems"
               color="primary" label="确定" @onclick="buildWmsOrderByBfsSelectedItems()" :disable="buildingState" />
        <q-btn color="primary" label="取消" outline unelevated v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
export default {
  name: 'OrderList'
}
</script>

<script lang="ts" setup>
import {reactive, Ref, ref} from 'vue'
import _ from 'lodash'
let orderListRef = ref<any>()

const onUpdateContractno = () => {
  void $f.ui.messageBox({
    caption: '操作确认',
    text: '确认更新合同号吗?',
    icon: 'Warning',
    buttons: 'OkCancel',
    delayClose: true
  }).then((btn) => {
    if (btn === 'ok') {
      $f.axios
        .post('/project/mhlbc/work/order/update-contractno-for-wms', _.map(orderListRef.value.$d.selectedItems, 'orderId'))
        .then(() => {
          $f.ui.closeMsgBox()
          orderListRef.value.loadListData()
        })
        .catch((err) => {
          void $f.ui.messageBox({
            caption: '更新合同号失败',
            text: $f.getAxiosErrMsg(err),
            icon: $f.getAxiosErrIcon(err),
            buttons: 'Close'
          })
        })
    }
  })
}

//创建仓储出货通知单弹窗相关代码
let IdArray: any[] = []
let showBuildWmsOrderDialog = ref(false)
let errorMessageForBuildWmsOrder = ref('')
const CertNoToLotAttr2: Ref<boolean | null> = ref(true)

const $d = reactive({
  orderIdArray: IdArray,
  orderIdArrayStr:'',
  CertNoToLotAttr2: CertNoToLotAttr2,
  CertNoToLotAttr2DropdownList: [
    { name:'是', value: true },
    { name:'否', value: false}
  ],
})

const doBuildWmsOrder = function () {
  $d.orderIdArray = _.map(orderListRef.value.$d.selectedItems,'orderId')
  $d.orderIdArrayStr = Array.from( $d.orderIdArray, (item, index) => {
    if (typeof item === 'string') {
      return index === 0 ? item : `, ${item}`;
    } else if (typeof item === 'number') {
      return index === 0 ? item.toString() : `, ${item}`;
    } else if (typeof item === 'boolean') {
      return index === 0 ? item.toString() : `, ${item}`;
    } else {
      throw new Error('Unsupported type');
    }
  }).join('')
  $d.CertNoToLotAttr2 = false

  showBuildWmsOrderDialog.value = true
  errorMessageForBuildWmsOrder.value = ''
}

let buildingState=ref(false)
const buildWmsOrderByBfsSelectedItems = function () {


  errorMessageForBuildWmsOrder.value = ''
  buildingState.value=true
  $f.axios
    .post('/project/mhlbc/work/order/build-wms-order-by-bfs-req', $d)
    .then(() => {
      showBuildWmsOrderDialog.value = false
      $f.ui.showNotifySucceeded('操作成功')
    })
    .catch((err) => {
      if (err.response?.data?.errorList?.length) {
        showBuildWmsOrderDialog.value = false
        $f.ui.showErrorListDlg(err?.response?.data)
      } else {
        errorMessageForBuildWmsOrder.value = $f.getAxiosErrMsg(err)
      }
    })
    .finally(() => {
      buildingState.value = false
      orderListRef.value.loadListData()
    })
}

</script>
